
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Add to cart fly animation effect </title>
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css'>

      <style>
      html, body {
  cursor: pointer;
}

.m-top {
  padding: 15px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #f0ad4e;
}

.m-tip {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 4px solid #ccc;
  color: #999;
  opacity: 0.8;
  margin: 160px auto;
  border-radius: 4px;
  width: 60%;
  padding: 40px 0;
  text-align: center;
  font-size: 16px;
}

.m-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  background: #000;
  z-index: 2000;
  width: 35px;
  height: 100%;
  font-size: 12px;
  color: #fff;
}
.m-sidebar .cart {
  color: #fff;
  text-align: center;
  line-height: 20px;
  padding: 200px 0 0 0px;
}
.m-sidebar .cart span {
  display: block;
  width: 20px;
  margin: 0 auto;
}
.m-sidebar .cart i {
  width: 35px;
  height: 35px;
  display: block;
  background-image: url();
}

.u-flyer {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: fixed;
  z-index: 9999;
}

    </style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

</head>

<body translate="no" >

  <div class="container">
  <div class="row">
    <p class="m-top">code repositoy：<a href="https://github.com/amibug/fly" target="_blank">https://github.com/amibug/fly</a> <span>喜欢就在github上star一个吧</span></p>
    <section class="m-tip">
      click at the blank!  click here</br>
      在空白处点击鼠标实现放入购物车效果
    </section>
  </div>
</div>

<div class="m-sidebar">
  <div class="cart">
    <i id="end"></i>
    <span>购物车</span>
  </div>
</div>
    <script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js"></script>

  <script src='http://libs.baidu.com/jquery/1.9.1/jquery.min.js'></script>
<script src='https://rawgit.com/amibug/fly/master/src/requestAnimationFrame.js'></script>
<script src='https://rawgit.com/amibug/fly/master/dist/jquery.fly.js'></script>

    <script>
    $('html,body').on('click', addProduct);
function addProduct(event) {
    var offset = $('#end').offset(), flyer = $('<img class="u-flyer" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/38111/profile/profile-80_1.jpg"/>');
    flyer.fly({
        start: {
            left: event.pageX,
            top: event.pageY
        },
        end: {
            left: offset.left,
            top: offset.top,
            width: 20,
            height: 20
        }
    });
}
  //# sourceURL=pen.js
  </script>

  
  

</body>
</html>
 